'use strict';
import React, {PropTypes}  from 'react';
import {
    ListView,
    Image,
    Text,
    View,
    TouchableOpacity,
    RefreshControl,
    StyleSheet,
} from 'react-native';
import RecommendedStar from './RecommendedStar';
import RoomEatPlay from './RoomEatPlay';
import Global from '../Commom/GlobalConst';
import DistanceUtil from '../Commom/DistanceUtil';


const styles = StyleSheet.create({
    itemBox: {
        flex: 1,
        borderBottomWidth: 10,
        borderColor: '#F2F3F5'
    },
    itemContentBox: {
        flex: 1,
        borderBottomWidth: 1,
        borderColor: '#F2F3F5',
        padding: 10,
        flexDirection: 'row'
    },
    itemImage: {
        width: 90,
        height: 90,
        marginRight: 10
    },
    itemTitle: {
        fontSize: 17,
        color: Global.FontColor.DimGray,

        marginTop: 0,
        paddingTop: 0,
    },
    itemDesc: {
        flex: 1,
        marginTop: 7,
        fontSize: 12,
        marginRight: 50,
        color: Global.FontColor.LightGrey
    },
    itemDis: {
        fontSize: 14,
        color: Global.FontColor.DimGray,
        position: 'absolute',
        bottom: 0,
        right: 0
    },
    itemHeadlineBox: {
        paddingLeft: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    headlineImg: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#3CD589',
        paddingRight: 10,
    },
    headlineText: {
        marginRight: 80,
        fontSize: 12,
        color: Global.FontColor.DarkGray,
        paddingLeft: 10,
        paddingTop: 10,
        paddingBottom: 10,
    }
});

class CountryHallListView extends React.Component {

    constructor(props) {
        super(props);
    }


    _renderRow(rowData) {
        let {listItemClick, headlineClick, headlineDetailsClick} = this.props;
        return (
            <TouchableOpacity
                onPress={() => listItemClick(rowData.rural_id)}
            >
                <View style={styles.itemBox}>
                    <View style={styles.itemContentBox}>
                        <Image source={{uri:rowData.rural_image}}
                               style={styles.itemImage}/>
                        <View style={{flex: 1,}}>
                            <Text style={styles.itemTitle}>{rowData.rural_title}</Text>
                            <RecommendedStar num={rowData.star}/>
                            <RoomEatPlay typeText={rowData.type_text}/>
                            <Text numberOfLines={1} style={styles.itemDesc}>{rowData.introduce}</Text>
                            <Text numberOfLines={1} style={styles.itemDis}>{DistanceUtil.km(rowData.distance)}</Text>
                        </View>
                    </View>
                    {rowData.headliness ? <View style={styles.itemHeadlineBox}>
                        <TouchableOpacity onPress={() =>headlineClick(rowData.rural_id)}>
                            <Text style={styles.headlineImg}>头条</Text>
                        </TouchableOpacity>
                        <View style={{width: 1, backgroundColor: '#ccc', height: 20}}/>
                        <TouchableOpacity onPress={() =>headlineDetailsClick(rowData.headliness)}>
                            <Text numberOfLines={1}
                                  style={styles.headlineText}>{rowData.headliness.title}</Text>
                        </TouchableOpacity>
                    </View> : null}

                </View>
            </TouchableOpacity>
        )
    }

    render() {
        let {renderHead, isLoading, onRefresh, loadMoreData, RuralDataSource} = this.props;
        return (
            <ListView
                renderRow={(rowData) => this._renderRow(rowData)}
                dataSource={RuralDataSource}
                onEndReached={() => {
                    loadMoreData();
                }}
                onEndReachedThreshold={100}
                renderHeader={()=> renderHead()}
                initialListSize={5}
                enableEmptySections={true}
                refreshControl={
                    <RefreshControl
                        refreshing={isLoading}
                        onRefresh={() => {
                            onRefresh();
                        }}
                        colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                    />
                }
            />
        )
    }
}
CountryHallListView.propTypes = {
    countryList: PropTypes.array,
};

export default CountryHallListView;